<template>
  <picker
    mode="multiSelector"
    range-key="name"
    :range="ranges"
    :value="addressValues"
    @change="change"
    @columnchange="columnchange"
  >
    <slot>{{text}}</slot>
  </picker>
</template>
<script>
import {
  province,
  area,
  city,
  getIndexs,
  getRanges,
  getText,
} from "common/js/address.js";
export default {
  name: "adderss-picker",
  props: {
    value: {
      default: "110101",
      type: String,
      required: true,
    },
  },
  computed: {
    text() {
      return getText(this.value);
    },
  },
  watch: {
    value() {
      this.addressValues = getIndexs(this.value);
      this.ranges = getRanges(this.addressValues);
    },
  },
  created() {
    if (!this.value) {
      this.$emit("input", this.defaultValue);
      return;
    }
    this.addressValues = getIndexs(this.value);
    this.ranges = getRanges(this.addressValues);
  },
  data() {
    return {
      addressValues: [],
      ranges: [],
      defaultValue: "110101",
    };
  },
  methods: {
    columnchange($ev) {
      let detail = $ev.detail;
      for (let i = detail.column + 1; i < 3; i++) {
        this.addressValues[i] = 0;
      }
      this.addressValues[detail.column] = detail.value;
      this.ranges = getRanges(this.addressValues);
    },
    change($ev) {
      let list = this.ranges[this.ranges.length - 1];
      let activeItem = list[$ev.detail.value[$ev.detail.value.length - 1]];
      this.$emit("input", activeItem.code);
    },
  },
};
</script>